<template>
  <div class="container">
    <h3>vue+openlayers: </h3>
    <div id="vue-openlayers"></div>
  </div>
</template>

<script>
import 'ol/ol.css';
import { Map, Overlay, View } from 'ol';
import Tile from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
export default {
  data() {
    return {
      map: null,
      overlayList: [
        
      ]
    }
  },
  mounted() {
    this.initMap();
    this.setFlashPoint();
  },
  methods: {
    initMap() {
      let layer = new Tile({
        source: new XYZ({
          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7'
        })
      })
      this.map = new Map({
        target: 'vue-openlayers',
        layers: [layer],
        view: new View({
          center: [116.397411, 39.909186],
          zoom: 7,
          projection: 'EPSG:4326'
        })
      })
    },

    // 使用Overlay创建闪烁点
    setFlashPoint() {
      var element = document.createElement('div'); // 创建一个div
      element.className = 'marker'; // div的class为marker
      var p = document.createElement('p'); // 创建一个p
      var span = document.createElement('span'); // 创建一个span
      var openlayer = document.getElementById('vue-openlayers'); // 获取地图容器
      openlayer.appendChild(element); // 将div添加到地图容器中
      element.appendChild(p); // div中添加p
      element.appendChild(span); // div中添加span
      var point_overlay = new Overlay({
        element,
        positioning: 'center-center', // 居中对齐
      })
      this.map.addOverlay(point_overlay); // 将overlay添加到map中
      point_overlay.setPosition([115.397411, 38.909186]); // 设置overlay的位置
    },

  }
}
</script>

<style>
.marker {
  background-color: #ff9900;
  width: 6px;
  height: 6px;
  border: 2px solid #ff9900;
  border-radius: 50%;
  position: relative;
}
.marker span,
  .marker p {
    position: absolute;
    width: 4px;
    height: 4px;
    animation: flash 1.5s linear infinite;
    box-shadow: 0px 0px 1px #ff0080;
    margin: 0;
    border-radius: 50%;
  }
  .marker span {
    animation-delay: 0.5s;
  }
@keyframes flash {
  10% {
    transform: scale(1);
  }
  100% {
    transform: scale(18);
  }
}
</style>
<style lang="scss" scoped>
.container {
    width: 100%;
    height: 750px;
    margin: 50px auto;
    border: 1px solid #ccc;
    #vue-openlayers {
      width: 100%;
      height: 720px;
      margin: 0 auto;
      border: 1px solid #42b983;
      position: relative;
    }
  }
</style>
